<template>
  <div class="gonggao-list-container">
    <div class="page-header">
      <h2>部门管理</h2>
      <div class="header-actions">
        <el-button type="primary" @click="goToPublish">创建新部门</el-button>
      </div>
    </div>
    <div>
      <ul>
        <div id="one">
          <div class="two">部门名称</div>
          <div class="two">部门编号</div>
          <div class="two">排序号</div>
          <div class="si">状态</div>
          <div class="san">操作</div>
        </div>
        <li v-for="item in bumenlist" :key="item._id">
          <div class="two">{{ item.name }}</div>
          <div class="two">{{ item.code }}</div>
          <div class="two">{{ item.sort }}</div>
          <div class="si">{{ item.status }}</div>
          <div class="mb-4">
            <el-button type="success" @click="editbumen(item)">修改</el-button>
            <el-button type="danger" @click="deletebumen(item._id)">删除</el-button>
          </div>
        </li>
      </ul>
    </div>
    <el-dialog v-model="dialogFormVisible" title="修改部门管理" width="500px">
      <el-form :model="putlist">
        <el-form-item label="部门名称" label-width="100px">
          <el-input v-model="putlist.name" autocomplete="off" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="部门编号" label-width="100px">
          <el-input v-model="putlist.code" autocomplete="off" placeholder="请输入部门编号" />
        </el-form-item>
        <el-form-item label="排序号" label-width="100px">
          <el-input v-model="putlist.sort" autocomplete="off" placeholder="请输入排序号" />
        </el-form-item>
        <el-form-item label="状态" label-width="100px">
          <el-input v-model="putlist.status" autocomplete="off" placeholder="请输入状态" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="put()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { BumendeleteList, Bumenputrequest, getBumenList } from '@/api/bumen';
// import { id } from 'element-plus/es/locales.mjs';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const dialogFormVisible = ref(false)
const putlist = ref(
  {
    name: '',
    code: '',
    sort: 0,
    status: 0,
    _id: '',
  })
const router = useRouter();
const bumenlist = ref([{
  name: '',
  code: '',
  sort: 0,
  status: 0,
  parentId: '',
  id: '',
}]);

function goToPublish() {
  router.push('/bumen/add')
}
async function bumenist() {
  await getBumenList().then((res) => {
    bumenlist.value = res.data.data;
    console.log(res.data.data);
  })
}
bumenist()
function deletebumen(id: number) {
  BumendeleteList(id).then((res) => {
    console.log(res);
    bumenist();
  })
}
function editbumen(bumenlist: string) {
  console.log(bumenlist);
  dialogFormVisible.value = true;
  putlist.value = { ...bumenlist };
}
async function put() {
  await Bumenputrequest(
    putlist.value.name, putlist.value.code, putlist.value.sort, putlist.value.status,
    putlist.value._id).then((res) => {
      console.log(res);
      dialogFormVisible.value = false;
      bumenist();
    });
}
</script>
<style lang="css" scoped>
ul #one {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #4b4b4b;
  text-align: center;
  align-items: center;
}

li {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
  height: 50px;
}

.one {
  width: 15%;
  text-align: center;
}

.two {
  width: 10%;
}

.si {
  width: 10%;
}

.san {
  width: 20%;
}

:deep(.mb-4) {
  width: 20%;
}

.gonggao-list-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.page-header h2 {
  font-size: 20px;
  font-weight: 500;
  color: #303133;
  margin: 0;
}

.search-bar {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.table-container {
  margin-bottom: 20px;
}
</style>
